<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KUAI 手机维修</title>
    <!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="/static/elementui/index.css">
    <!-- 引入 Vue 2 -->
    <script src="/static/vue2/vue.min.js"></script>
    <!-- 引入 ElementUI JS -->
    <script src="/static/elementui/index.js"></script>
    <!-- 引入 Axios -->
    <script src="/static/axios.min.js"></script>
    <!-- 引入 Cookies操作第三方JS -->
    <script src="/static/js.cookie.min.js"></script>
    <!-- 引入自定义样式和公共样式 -->
    <link rel="stylesheet" href="/css/repairPage.css">
    <link rel="stylesheet" href="/css/common.css">
</head>

<body>
    <div id="app">
        <!-- 导航栏 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1-1" @click="goToIndex">前台接待</el-menu-item>
            <el-menu-item index="2-1" @click="goToRepair">维修管理</el-menu-item>
            <el-menu-item index="3-1" @click="goToAccess">配件查询</el-menu-item>
            <el-menu-item index="4-1" @click="goToUser">账号管理</el-menu-item>
            <el-menu-item index="5-1" @click="goTosupplier">供应商管理</el-menu-item>
            <el-menu-item index="6" @click="logout">退出登录</el-menu-item>
        </el-menu>

        <!-- 图片轮播 -->
        <el-carousel :interval="5000" arrow="" height="450px" style="width: 100%;height: 450px;">
            <el-carousel-item>
                <img src="/static/img/brand1.jpg" class="carousel-image">
            </el-carousel-item>
            <el-carousel-item>
                <img src="/static/img/brand2.jpg" class="carousel-image">
            </el-carousel-item>
            <el-carousel-item>
                <img src="/static/img/brand3.jpg" class="carousel-image">
            </el-carousel-item>
            <el-carousel-item>
                <img src="/static/img/brand4.jpg" class="carousel-image">
            </el-carousel-item>
        </el-carousel>

        <!-- 页面内容切换 -->
        <div>
            <!-- 模块标题 -->
            <div class="hengfu">
                <span>用户账户管理</span>
                <span style="font-size: 13px;font-weight: 500;color: rgb(164, 164, 164);">&emsp;用心服务好每一个顾客是我们的追求</span>
            </div>
            <!-- 表格 -->
            <template>
                <div class="searchInput" style="width: 280px;">
                    <el-input v-model="searchKeyword" placeholder="搜索关键词" clearable size="mini" @input="updateSearch"
                              @keyup.enter="filterTable"></el-input>
                    <el-button class="minibutton" size="mini" type="primary" @click="filterTable"><i class="el-icon-search"></i></el-button>
                    <el-button class="minibutton" size="mini" type="success"  @click="addUser">
                        <i class="el-icon-plus"></i> 添加用户
                    </el-button>
                </div>
            </template>
            <el-table style="zoom: 90%" :data="tableData" style="width: 100%" border highlight-current-row
                @sort-change="handleSortChange" :loading="loading">
                <el-table-column prop="userId" label="用户 ID" width="100" sortable></el-table-column>
                <el-table-column prop="userName" label="用户名称" width="150"></el-table-column>
                <el-table-column prop="userEmail" label="用户邮箱" width="170"></el-table-column>
                <el-table-column prop="userBio" label="用户简介"></el-table-column>
                <el-table-column label="用户角色" width="140">
                    <template slot-scope="scope">
                        {{ getRoleName(scope.row.roleId) }}
                    </template>
                </el-table-column>                <el-table-column prop="userPhone" label="用户手机号" width="150"></el-table-column>
                <el-table-column prop="userCreatedAt" label="创建时间" width="180" sortable></el-table-column>
                <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button size="mini" type="info" @click="viewUserDetails(scope.row)">详情</el-button>
                        <el-button size="mini" type="primary" @click="updateUser(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!-- 分页组件 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="count">
            </el-pagination>
        </div>

        <el-dialog title="添加用户" :visible.sync="addUserDialog" width="400px">
            <el-form :model="newUser" label-width="100px" ref="addUserForm">
                <el-form-item label="用户姓名" :rules="{ required: true, message: '请输入用户姓名', trigger: 'blur' }">
                    <el-input v-model="newUser.userName" placeholder="请输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" :rules="{ required: true, message: '请输入用户密码', trigger: 'blur' }">
                    <el-input type="password" v-model="newUser.userPwd" placeholder="请输入用户密码"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" :rules="{ required: true, message: '请输入用户邮箱', trigger: 'blur' }">
                    <el-input type="textarea" v-model="newUser.userEmail" placeholder="请输入用户邮箱"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" :rules="{ required: true, message: '请输入用户手机号', trigger: 'blur' }">
                    <el-input type="text" v-model="newUser.userPhone" placeholder="请输入用户手机号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addUserDialog = false">取消</el-button>
                <el-button type="primary" @click="submitNewUser">提交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改用户" :visible.sync="updateUserDialog" width="400px" >
            <el-form :model="currentUser" label-width="120px" ref="updateUserForm">
                <el-form-item label="用户名称">
                    <el-input type="text" v-model="currentUser.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱">
                    <el-input type="textarea" v-model="currentUser.userEmail"></el-input>
                </el-form-item>
                <!-- 修改用户弹窗 -->
                <el-form-item label="用户角色">
                    <!-- 将 input 改为 select -->
                    <el-select v-model="currentUser.roleId" placeholder="请选择角色">
                        <el-option
                                v-for="role in roles"
                                :key="role.roleId"
                                :label="role.roleName"
                                :value="role.roleId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户手机号">
                    <el-input type="text" v-model="currentUser.userPhone"></el-input>
                </el-form-item>
                <el-form-item label="用户简介">
                    <el-input type="textarea" v-model="currentUser.userBio"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateUserDialog = false">取消</el-button>
                <el-button type="primary" @click="submitUpdatedUser">保存</el-button>
            </div>
        </el-dialog>
        <!-- 引入页面逻辑 -->
        <script src="/js/user.js"></script>
        </div>
</body>

</html>
